<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>食材采购管理系统</title>
    <style>
        /* 全局样式 */
        :root {
            --primary-color: #4a6fa5;
            --secondary-color: #f89406;
            --success-color: #46a546;
            --danger-color: #ee5f5b;
            --warning-color: #f89406;
            --info-color: #4a77d4;
            --light-color: #f5f5f5;
            --dark-color: #333333;
            --border-color: #ddd;
            --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s ease;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: #f9f9f9;
            color: var(--dark-color);
            line-height: 1.6;
            padding: 20px;
        }

        /* 标题样式 */
        .page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--border-color);
        }

        .page-title {
            color: var(--primary-color);
            font-size: 28px;
            font-weight: 700;
        }

        /* 搜索表单样式 */
        .search-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            padding: 20px;
            margin-bottom: 30px;
        }

        .search-form {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
        }

        .search-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: var(--dark-color);
        }

        .search-form select,
        .search-form input[type="text"],
        .search-form button {
            padding: 10px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            transition: var(--transition);
        }

        .search-form select:focus,
        .search-form input[type="text"]:focus,
        .search-form button:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(74, 111, 165, 0.2);
        }

        .search-form button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            cursor: pointer;
        }

        .search-form button:hover {
            background-color: #3d5c8a;
        }

        /* 表格样式 */
        .table-container {
            background-color: white;
            border-radius: 8px;
            box-shadow: var(--box-shadow);
            overflow: hidden;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            background-color: var(--primary-color);
            color: white;
            text-align: left;
            padding: 15px;
            font-weight: 600;
            position: relative;
            transition: var(--transition);
        }

        th:hover {
            background-color: #3d5c8a;
        }

        td {
            padding: 15px;
            border-bottom: 1px solid var(--border-color);
            transition: var(--transition);
        }

        tr {
            border-bottom: 1px solid var(--border-color);
        }

        tr:last-child {
            border-bottom: none;
        }

        tr:hover {
            background-color: #f8f9fa;
        }

        /* 操作按钮样式 */
        .action-buttons {
            display: flex;
            gap: 10px;
        }

        .btn {
            padding: 8px 15px;
            border-radius: 4px;
            text-decoration: none;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: var(--transition);
            border: none;
            cursor: pointer;
            font-size: 14px;
        }

        .btn-delete {
            background-color: var(--danger-color);
            color: white;
        }

        .btn-delete:hover {
            background-color: #d54e48;
        }

        /* 结果统计样式 */
        .result-count {
            margin-top: 20px;
            font-size: 16px;
            color: var(--dark-color);
            font-weight: 500;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .search-form {
                flex-direction: column;
            }

            .search-form select,
            .search-form input[type="text"],
            .search-form button {
                width: 100%;
            }

            table {
                display: block;
                overflow-x: auto;
            }
        }
    </style>
</head>
<body>
<div class="page-header">
    <h2 class="page-title">食材采购管理系统</h2>
</div>

<div class="search-container">
    <form class="search-form" action="${pageContext.request.contextPath}/foods/list" method="get">
        <div>
            <label for="type">所属类别：</label>
            <select id="type" name="type">
                <option value="">请选择</option>
                <option value="蔬菜" <c:if test="${type == '蔬菜'}">selected</c:if>>蔬菜</option>
                <option value="肉类" <c:if test="${type == '肉类'}">selected</c:if>>肉类</option>
                <option value="水产" <c:if test="${type == '水产'}">selected</c:if>>水产</option>
                <option value="粮油" <c:if test="${type == '粮油'}">selected</c:if>>粮油</option>
                <option value="调料" <c:if test="${type == '调料'}">selected</c:if>>调料</option>
            </select>
        </div>

        <div>
            <label for="name">食材名称：</label>
            <input type="text" id="name" name="name" value="${name}">
        </div>

        <button type="submit">搜索</button>
    </form>
</div>

<div class="table-container">
    <table>
        <thead>
        <tr>
            <th>编号</th>
            <th>名称</th>
            <th>类别</th>
            <th>价格</th>
            <th>采购人</th>
            <th>采购时间</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <c:forEach items="${foodsList}" var="food">
            <tr>
                <td>${food.id}</td>
                <td>${food.name}</td>
                <td>${food.type}</td>
                <td>${food.price}</td>
                <td>${food.buyer}</td>
                <td><fmt:formatDate value="${food.buyTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                <td>
                    <button class="btn btn-delete" onclick="confirmDelete(${food.id})">删除</button>
                </td>
            </tr>
        </c:forEach>
        </tbody>
    </table>
</div>

<p class="result-count">共为您查询到${total}条符合条件的信息。</p>

<script>
    function confirmDelete(id) {
        if (confirm("确定要删除这条食材信息吗？此操作不可恢复")) {
            window.location.href = "${pageContext.request.contextPath}/foods/delete?id=" + id;
            }
        }
</script>
</body>
</html>
